<template>
	<view class="content">
		<home-page @openorder="to_order" v-if="tabbarIndex==0"></home-page>
		<order-page v-if="tabbarIndex==1"></order-page>
		<my-page @openorder="to_order" v-if="tabbarIndex==2"></my-page>
		<view class='tabar'>
		  <view :class="tabbarIndex == index ? 'tabbar_nav tabbar1_nav':'tabbar_nav'" v-for="(item,index) in tebar" :key="index" @tap="tabar(index)">
			<image :src='tabbarIndex == index?item.selectedIconPath : item.iconPath'></image>
			<text>{{item.text}}</text>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarIndex:0,
				tebar:[
				  {
					iconPath: '/static/images/ivon_02.png',
					selectedIconPath: '/static/images/ivon_01.png',
					text: '首页'
				  },
				  {
					iconPath: '/static/images/ivon_08.png',
					selectedIconPath: '/static/images/ivon_07.png',
					text: '订单'
				  },
				  {
					iconPath: '/static/images/ivon_06.png',
					selectedIconPath: '/static/images/ivon_05.png',
					text: '我的'
				  },
				]
			};
		},
		methods:{
			//底部跳转
			tabar(index){
			  this.tabbarIndex = index
			},
			to_order(e){
				console.log(e)
				let type = e.detail.type;
				if(type=="yiwancheng"){
					console.log("加载已完成订单数据")
				}
				if(type=="daiwancheng"){
					console.log("加载待完成订单数据")

				}
				if(type=="yijiedan"){
					console.log("加载已接单订单数据")

				}
				this.tabar(1)
			}
		}
	}
</script>

<style>
/* 底部 */
.tabar{
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  height:100upx;
  background-color:#fff;
  color:#878b97;
  font-size:26upx;
  display: flex;
  border-top: 1px solid #ddd;
}
.tabbar_nav{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:33.33%;
  font-size: 22upx;
  background-color:#fff; 
	color: #878b97;
}

.tabbar_nav image{
  height: 50upx;
  width: 50upx;
}
.tabbar1_nav{
  color: #546af9;
}
</style>
